<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('merchantApplicationConfig.入驻配置管理')" />
    <el-table
      :show-header="false"
      :data="tableData"
      style="width: 100%"
      border
      class="covertable"
      v-loading="loading"
    >
      <el-table-column prop="label" width="200" class-name="label-column" />
      <el-table-column prop="value">
        <template #default="{ row }">
          <div v-if="row.type === 'number'" style="width: 300px">
            <el-input-number
              v-model="row.value"
              :min="0"
              :max="100"
              style="width: 100%"
              controls-position="right"
              :placeholder="$t('merchantApplicationConfig.请输入')"
            />
            <div class="tips-text mt8">{{ row.tips }}</div>
          </div>
          <div v-else-if="row.type === 'text'" style="width: 300px">
            <el-input
              v-model="row.value"
              style="width: 100%"
              controls-position="right"
              :placeholder="$t('merchantApplicationConfig.请输入')"
            />
          </div>
          <el-button
            v-else-if="row.type === 'button'"
            type="primary"
            @click="handleSave"
          >
            {{ $t('merchantApplicationConfig.保存') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const loading = ref(false);
const tableData = ref([
  {
    label: t('merchantApplicationConfig.分润比例'),
    value: 0,
    type: "number",
  },
  {
    label: t('merchantApplicationConfig.收款人姓名'),
    value: "",
    type: "text",
  },
  {
    label: t('merchantApplicationConfig.收款账户号码'),
    value: "",
    type: "text",
  },
  {
    label: t('merchantApplicationConfig.收款银行名称'),
    value: "",
    type: "text",
  },
  {
    label: t('merchantApplicationConfig.收款银行地址'),
    value: "",
    type: "text",
  },
  {
    label: "SWIFT CODE",
    value: "",
    type: "text",
  },
  {
    label: "",
    type: "button",
  },
]);

const handleSave = () => {
  const params = {
    commissionRate: tableData.value[0].value,
    accountBankAccountName: tableData.value[1].value,
    accountBankAccountNo: tableData.value[2].value,
    accountBankName: tableData.value[3].value,
    accountBankAddress: tableData.value[4].value,
    accountBankCode: tableData.value[5].value,
  };
  Api.saveConfig(params).then((res) => {
    const { status } = res;
    if (status === 200) {
      ElMessage.success(t('merchantApplicationConfig.保存成功'));
      getConfig();
    }
  });
};

const getConfig = () => {
  loading.value = true;
  Api.getConfig({})
    .then((res) => {
      const { data, status } = res;
      if (status === 200) {
        tableData.value[0].value = data.commissionRate;
        tableData.value[1].value = data.accountBankAccountName;
        tableData.value[2].value = data.accountBankAccountNo;
        tableData.value[3].value = data.accountBankName;
        tableData.value[4].value = data.accountBankAddress;
        tableData.value[5].value = data.accountBankCode;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  getConfig();
});
</script>
<style lang="scss" scoped>
.tipsRow {
  width: 100%;
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: 4px;
  background: rgba(255, 126, 40, 0.07);
  color: #ff7e28;
  font-size: 12px;
  li {
    padding: 2px 0;
    color: #db5609;
    font-size: 12px;
  }
}
.covertable {
  .el-table__cell {
    padding: 12px 0;
  }

  :deep(.label-column) {
    .cell {
      text-align: right;
    }
  }
}

.tips-text {
  color: #00000073;
  font-size: 12px;
}
</style>
